<template>
  <h1>年龄：{{ age }}</h1>
  <button @click="setAge">按钮</button>
  <hr>
  <HelloWorld v-if="flag"></HelloWorld>
  <button @click="setFlag">点击切换</button>
</template>
<!-- 在script标签上 写入setup 就是 setup入口函数的语法糖  -->
<script setup>
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated, ref
} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// 1. 挂载之前执行 
onBeforeMount(() => {
  console.log('onBeforeMount');
})
// 2. 挂载之后执行 
onMounted(() => {
  console.log('onMounted');
})
// 3.更新组件之前
onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
})
// 4. 更新之后执行
onUpdated(() => {
  console.log('onUpdated');
})
let age = ref(0)
const setAge = () => {
  console.log(age.value++);
}
// ----测试销毁的钩子函数------------
  let flag = ref(true)
  const setFlag = ()=>{
    flag.value = !flag.value;
  }
/*
export default {
  setup(){
    console.log('setup');
  },
  beforeMount(){
    console.log('beforeMount');
  }
}
*/
</script>
<!-- 再写一个script标签 使用Vue2的方法 写入name属性 -->
<script>
export default {
  name: "App"
}
</script>